<template>
	<view class="container" v-if="newlist.length > 0">
		<view class="bigBox">
			<view class="title flex justify-between text-white">
				<text class="text-lg text-bold">新用户福利</text>
				<navigator url="/pages/activity/newComers/newComers-list">
					<view class="flex align-center">
						<text class="text-sm">更多</text>
						<text class="cuIcon-right margin-left-xs" style="font-size: 20rpx;"></text>
					</view>
				</navigator>
			</view>
			<view class="flex" style="margin: 0 -8rpx;">
				<block v-for="(item,index) in newlist" :key="index">
					<view class="list-box" @tap="toDetail(item)">
						<view class="box bg-white">
							<view class="image" :style="[{backgroundImage: 'url('+item.thumb+')'}]"></view>
							<view class="padding-lr-xs text-cut text-xs text-333" style="line-height: 28rpx;">{{item.name}}</view>
							<view class="bot_box margin-xs flex justify-between">
								<view class="text-xs">到手价</view>
								<view class="flex">
									<view class="bot-right text-center text-xs text-white">￥{{item.activity_price}}</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newlist: [],
			};
		},
		created() {
			this.loadData();
		},
		methods: {
			loadData(){
				this.$api.post(global.apiUrls.postNewComers)
				.then((res) => {
					console.log("新人特惠", res);
					if (res.statusCode == 200 && res.data.code == 1) {
						let list = res.data.data;
						this.newlist = list.slice(0,3);
					}
				})
			},
			// 去商品详情
			toDetail(item) {
				console.log(item)
				this.$urouter.navigateTo({
					url: '/pages/activity/newComers/newComers-detail',
					params: {
						goods_id: item.goods_id,
						activity_id: item.activity_id || 0,
						sku_id: item.sku_id || 0,
					}
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		margin: 20rpx 32rpx 0 32rpx;
	}

	.bigBox {
		background: linear-gradient(180deg, #fe5314 0%, #f7321d 100%);
		border-radius: 16px 16px 16px 16px;
		padding: 20rpx 24rpx;
		.title {
			height: 60rpx;
		}
	}

	.list-box {
		margin: 0 8rpx;
		.box{
			width: 202rpx;
			height: 306rpx;
			border-radius: 16rpx;
			overflow: hidden;
			.image{
				width: 202rpx;
				height: 196rpx;
				margin: 0 0 16rpx;
				border-radius: 8rpx 8rpx 0 0;
				background-size: cover;
			}
			.bot_box{
				height: 36rpx;
				background-color: #FFE167;
				color: #B06313;
				padding-left: 10rpx;
				border-radius: 8rpx;
				view{line-height: 36rpx;}
				background-position: top center;
				background-size: contain;
				background-repeat: no-repeat;
				background-image: url("https://www.shiyaocanyin.com/images/home/welfare.jpg");
				image{
					width: 28rpx;
					height: 100%;
					margin-right: -6rpx;
				}
				.bot-right{
					width: 82rpx;
					background:linear-gradient(91deg,rgba(254,28,66,1) 0%,rgba(255,67,3,1) 100%);
					padding-left: 6rpx;
					border-radius: 0 8rpx 8rpx 0;
				}
			}
		}
	}
</style>
